<template>
  <div class="infoMain">
      <div class="left">
          <left></left>
      </div>
      
      <div class="right">
          <top class="infoTop"></top>
          <div class="mains">
               <el-scrollbar style="height:100%;">
                   <router-view></router-view>
               </el-scrollbar>
          </div>
      </div>
      <!-- <div class="infoMobile">
          <div class="tops">
              <div class="left regular">
                  ZhuBaBa
              </div>
              <div class="right">
                  <span></span>
                  <span></span>
                  <span></span>
              </div>
          </div>
      </div> -->
      <!-- <el-drawer
        title="移动端!"
        :visible.sync="table"
        direction="rtl"
        size="50%">
           
        </el-drawer> -->
  </div>
</template>

<script>
import left from "./components/left"
import top from "./components/top"
export default {
    components: {
        left,
        top
    },
    data:function(){
        return {
            isMobile:document.body.clientWidth < 750 ? true : false
        }
    }
}
</script>

<style lang="scss" scoped>
.infoMain{
    height:100%;
    display: flex;
    .infoTop{
        // height: 80px;
        // line-height: 80px;
    }
    .right{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .mains{
        flex: 1;
        overflow: hidden;
        padding: 50px;
        box-shadow: 0 0 50px rgba(000,000,255,.3) inset;
        background: #f1f5fe;
    }
}
@media screen and (max-width: 750px){
    .left{
        display: none;
    }
    .right{
        .mains{
            padding: 10px;
        }
    }
}
</style>

